<template>
  <div class="home_page_warp">
    <div v-show="!isShowAddressSelect">
      <contentPage>
        <pageHeader @openSelectAds="openSelectAds" />
        <div class="home_page_warp2">
          <ul class="home_warp2_ul">
            <li v-for="(item2,index2) in homeData" :key="index2" class="home_warp2_li">
              <div class="home_warp2_li_top">
                <div class="home_warp2_li_top_title">核心城市二手房冰山指数涨幅排名(第160期)</div>
                <div class="home_wlt_info">
                  <img class="home_wlt_info_img" src="../../assets/icon/app_logo.png" alt="">
                  <div class="home_wlt_info_desc">
                    <div class="home_wlt_info_title">冰山指数</div>
                    <div class="home_wlt_info_con">----每天一分钟，便知房趋势</div>
                  </div>
                </div>
              </div>
              <div class="home_warp2_li_center">
                <div class="home_warp2_left">
                  <table ref="tableHeight" class="home_table">
                    <tr>
                      <th class="home_table_th home_table_th1">城市</th>
                      <th class="home_table_th home_table_th2">五月第二周</th>
                      <th class="home_table_th home_table_th3">六月第二周</th>
                      <th class="home_table_th home_table_th4">月环比</th>
                      <th class="home_table_th home_table_th5">排名</th>
                    </tr>
                    <tr v-for="(item,index) in item2.list2" :key="index">
                      <td class="home_table_td" @click="goCityDetail">北京</td>
                      <td class="home_table_td">张山</td>
                      <td class="home_table_td">李四</td>
                      <td class="home_table_td">王五</td>
                      <td class="home_table_td">{{ index + 1 }}</td>
                    </tr>
                  </table>
                </div>
                <div class="home_warp2_right" :style="{height: item2.tabH + 'px'}">
                  <div class="homeEacher" :style="{height: item2.tabH + 'px'}" />
                </div>
              </div>
              <div class="home_warp2_li_bottom">
                深圳重新恢复强势上涨，涨幅扩大中,
                深圳重新恢复强势上涨，涨幅扩大中,
                深圳重新恢复强势上涨，涨幅扩大中
              </div>
            </li>
          </ul>
        </div>
        <!--        轮播图-->
        <div>
          <van-swipe class="my_swipe" :autoplay="3000" indicator-color="white">
            <div v-for="item in 3 " :key="item">
              <van-swipe-item>
                <div class="home_swiper_title">推荐阅读</div>
                <div class="home_swiper_content"> <span>贷款合集：</span>16款抵押贷+5款信用贷（上海） </div>
                <div class="home_swiper_content"> <span>贷款合集：</span>16款抵押贷+5款信用贷（上海） </div>
              </van-swipe-item>
            </div>
          </van-swipe>
        </div>
      </contentPage>
      <footerPage />
    </div>
    <div v-show="isShowAddressSelect">
      <address-select @closeSelectCity="closeSelectAds" />
    </div>
  </div>
</template>

<script>
import footerPage from '../../components/footer_page'
import contentPage from '../../components/content_page'
import addressSelect from '../../components/addressSelect'
import pageHeader from '../../components/page_header'
export default {
  name: 'Home',
  components: { footerPage, contentPage, addressSelect, pageHeader },
  data() {
    return {
      searchKeyWord: '',
      currentSelectAddress: '上海',
      isShowAddressSelect: false, // 是否显示地址的选择页面
      tableH1: 0, // 表格1的高度
      tableH2: 0, // 表格2的高度
      homeData: [{ list2: 10 }, { list2: 10 }],
    }
  },
  computed: {
  },
  created() {
    // this.getHomePageData()
  },
  mounted() {
    this.getTableHeight()
  },
  methods: {
    /** 获取到table容器的的高度 **/
    getTableHeight() {
      this.$nextTick(async() => {
        console.log(this.$refs.tableHeight)
        const tempList1 = this.$refs.tableHeight
        const tempList2 = []
        tempList1.forEach((item) => {
          tempList2.push(item.offsetHeight)
        })
        console.log('长度数组', tempList2)

        const tempList = this.homeData.map((item, index) => {
          return Object.assign(item, { tabH: tempList2[index] })
        })
        console.log('整合后的数组', tempList)
        this.homeData = tempList
        this.$nextTick(() => {
          this.drawChart()
        })
        console.log(this.homeData)
      })
    },
    /**  模拟请求数据 **/
    getHomePageData() {
      this.isShowLoading = true
      const timer = setTimeout(async() => {
        this.homeData = [
          { id: 0, name: 'kkw', tableList: [], list2: 10 },
          { id: 1, name: 'kkw', tableList: [], list2: 20 },
        ]
        // await this.getTableHeight()
        await this.drawChart()
        clearTimeout(timer)
      }, 1000)
    },
    /** 去对应的城市详情页面 **/
    goCityDetail() {
      this.$router.push({ name: 'trend' })
    },

    /** 打开地址选择 **/
    openSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    /** 绘制eacher图 **/
    drawChart() {
      const homeCharts = document.getElementsByClassName('homeEacher') // 对应地使用ByClassName
      const arrayLength = homeCharts.length
      for (let i = 0; i < arrayLength; i++) {
        const myChart = this.$echarts.init(homeCharts[i])
        myChart.setOption({
          title: {
            subtext: '城市',
            subtextStyle: {
              color: '#000000',
              fontSize: 14,
              fontStyle: 'normal',
              fontWeight: 'bold',
            },
            x: 4,
            y: -10,
          },
          grid: {
            left: '3%',
            top: '8%',
            right: '15%',
            bottom: '3%',
            containLabel: true,
          },
          xAxis: [
            {
              type: 'value',
              splitLine: { show: false },
              axisLine: { show: false },
              axisTick: { show: false },
              show: false,
            },
          ],
          yAxis: [
            {
              type: 'category',
              axisTick: { show: false },
              splitLine: { show: false },
              axisLine: { show: false },
              position: 'left',
              nameLocation: 'nameGap',
              data: ['北京', '北京', '哈尔滨', '黑龙江', '北京', '北京', '北京', '北京'],
            },
          ],
          series: [
            {
              type: 'bar',
              // barMaxWidth: '40',
              barWidth: '14',
              // barGap: '40%', /* 多个并排柱子设置柱子之间的间距*/
              // barCategoryGap: '80%', /* 多个并排柱子设置柱子之间的间距*/
              label: {
                show: true,
                position: 'right',
              },
              data: [-80, -30, -10, 20, 30, 40, 80, 120],
              itemStyle: {
                normal: {
                  barBorderRadius: false,
                  color: (params) => {
                    const currentValue = params.value
                    if (currentValue > 0 && currentValue <= 10) { return '#F08080' }
                    if (currentValue > 10 && currentValue <= 30) { return '#FF6347' }
                    if (currentValue > 30 && currentValue <= 50) { return '#FF4500' }
                    if (currentValue > 50 && currentValue <= 80) { return '#B22222' }
                    if (currentValue > 80 && currentValue <= 100) { return '#8B3A3A' }
                    if (currentValue > 100) { return '#FF0000' }
                    if (currentValue > -10 && currentValue <= 0) { return '#7FFFD4' }
                    if (currentValue > -30 && currentValue <= -10) { return '#76EEC6' }
                    if (currentValue <= -30) { return '#66CDAA' }
                  },
                },
              },
            },

          ],
        })
        window.onresize = myChart.resize
      }
    },
    /** 关闭选择城市的弹窗 **/
    closeSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    /** 打开选择城市的弹窗 **/
    openSelectAddress() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
  },
}
</script>

<style scoped lang="scss">
@import "../../assets/style/base";
  .home_page_warp{
    .home_page_warp1{
      position: relative;
      width: 100%;
      height: pxTorem(360px);
      .home_header_img{
        width: 100%;
        height: pxTorem(360px);
      }
      .home_header_content{
        position: absolute;
        top: 0;
        width: 100%;
        .home_reserve_title{
          background-color: #1296db;
          margin: 0 auto pxTorem(20px) auto;
          padding: pxTorem(12px) 0;
          font-size: pxTorem(32px);
          color: #ffffff;
          text-align: center;
        }
        .home_reserve_btn{
          background-color: #ff9900;
          width: pxTorem(240px);
          margin: pxTorem(20px) auto pxTorem(60px) auto;
          padding: pxTorem(14px) 0;
          border-radius: pxTorem(30px);
          font-size: pxTorem(24px);
          color: #ffffff;
          text-align: center;
        }
        .home_select_search_warp{
          width: 96%;
          height: pxTorem(72px);
          margin: auto;
          display: flex;
          background-color: #ffffff;
          align-items: center;
          .home_select_address{
            border-right: 1px solid #999999;
            font-size: pxTorem(26px);
            padding: 0 pxTorem(16px);
            display: flex;
            align-items: center;
          }
          .home_search_input_warp{
            margin-left: pxTorem(24px);
            display: flex;
            align-items: center;
            .home_search_input{
              width: pxTorem(500px);
              margin-left: pxTorem(24px);
              border: none;
              outline: none;
              font-size: pxTorem(26px);
            }
          }
        }
      }
    }
    .home_page_warp2{
      width: 100%;
      .home_warp2_ul{
        .home_warp2_li{
          border-bottom: pxTorem(14px) solid #f1f1f1;
          .home_warp2_li_top{
           .home_warp2_li_top_title{
             margin-top: pxTorem(15px);
             font-size: pxTorem(32px);
             text-align: center;
           }
           .home_wlt_info{
             display: flex;
             align-items: center;
             margin-bottom: pxTorem(24px);
             .home_wlt_info_img{
               width: pxTorem(100px);
               height: pxTorem(100px);
               margin-right: pxTorem(24px);
               margin-left: pxTorem(30px);
             }
             .home_wlt_info_desc{
               font-size: pxTorem(28px);
               .home_wlt_info_title{}
               .home_wlt_info_con{}
             }
           }
          }
          .home_warp2_li_center{
            display: flex;
            margin-bottom: pxTorem(24px);
            .home_warp2_left{
              flex: 1;
              padding: pxTorem(10px);
              .home_table{
                font-size: pxTorem(14px);
                .home_table_th{
                }
                .home_table_th1{
                  width: pxTorem(60px);
                }
                .home_table_th2{
                  width: pxTorem(90px);
                }
                .home_table_th3{
                  width: pxTorem(90px);
                }
                .home_table_th4{
                  width: pxTorem(90px);
                }
                .home_table_th5{
                  width: pxTorem(90px);
                }
                .home_table_td{
                  text-align: center;
                  padding: pxTorem(6px) 0;
                }
              }
            }
            .home_warp2_right{
              width: pxTorem(360px);
              .homeEacher{
                width: pxTorem(360px);
              }
            }
          }
          .home_warp2_li_bottom{
            padding: pxTorem(14px) pxTorem(30px);
            text-indent: 2em;
            color: #ff0000;
            font-size: pxTorem(32px);
            font-weight: 600;
          }

        }
      }

    }
    /*轮播图*/
    .my_swipe {
      height: pxTorem(300px);
      background-color: #39a9ed;
    }
      .home_swiper_title{
        font-size: pxTorem(40px);
        padding: pxTorem(40px) 0 pxTorem(40px) pxTorem(30px);
      }
      .home_swiper_content{
        font-size: pxTorem(30px);
        padding: pxTorem(10px) pxTorem(30px);
      }
  }
</style>
